<template>
  <div class="FooterMusicWrap">
    <div class="FooterMusic">
      <div class="cdcover" ref="cdcover">
        <img :src="playList[playListIndex].al.picUrl" alt="" />
      </div>
      
<Transition>

      <mini-play-list v-show="showMiniPlayList"></mini-play-list>
</Transition>


      <div class="footerLeft" @click="updateShowBigPlayer(true)">
        <div class="info">
          <p>{{ playList[playListIndex].name }}</p>
        </div>
      </div>
      <div class="footerRight">
        <svg aria-hidden="true" @click="playPause" v-show="isPlaying">
          <use xlink:href="#icon-zanting"></use>
        </svg>
        <svg aria-hidden="true" @click="playPause" v-show="!isPlaying">
          <use xlink:href="#icon-yunhang"></use>
        </svg>

        <svg aria-hidden="true" @click="updateShowMiniPlayList(true)">
          <use xlink:href="#icon-31liebiao"></use>
        </svg>
        <audio
          ref="myAudioPlayer"
          :src="`https://music.163.com/song/media/outer/url?id=${playList[playListIndex].id}.mp3`"
        ></audio>
      </div>

      <!-- 图标位置 -->
      <van-popup
        v-model:show="showBigPlayer"
        closeable
        close-icon-position="top-left"
        position="bottom"
        close-icon="arrow-down"
        :style="{ height: '100%' }"
      >
        <BigPlayer
          :musicList="playList[playListIndex]"
          :playPause="playPause"
          :isPlaying="isPlaying"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, useStore } from "vuex";
import { ref, watch } from "vue";
import BigPlayer from "@/components/player/BigPlayer.vue";
import MiniPlayList from "@/components/player/MiniPlayList.vue";
export default {
  components: {
    BigPlayer,
          MiniPlayList
  },
  data() {
    return {
      currentTimer: 0,
    };
  },
  computed: {
    ...mapState([
      "playList",
      "playListIndex",
      "isPlaying",
      "showBigPlayer",
      "currentTime",
      "showMiniPlayList"
    ]),
  },
  updated() {
    this.$store.dispatch("getLyric", this.playList[this.playListIndex].id);
  },
  methods: {
    ...mapMutations([
      "updatePlayStatus",
      "updatePlayStatus",
      "updateShowBigPlayer",
      "updataDuration",
      "updateCurrentTime",
      "updateShowMiniPlayList"
    ]),
    playPause() {
      if (this.$refs.myAudioPlayer.paused) {
        // console.log(111);
        this.$refs.myAudioPlayer.play();
        this.$refs.cdcover.style.animationPlayState = "running";
        this.updatePlayStatus(true);
        // console.log(this.$refs.myAudioPlayer.currentTime);
        this.updataDuration(this.$refs.myAudioPlayer.duration);
        this.updateTime();
      } else {
        this.$refs.myAudioPlayer.pause();
        this.$refs.cdcover.style.animationPlayState = "paused";
        this.updatePlayStatus(false);
        // 暂停清除定时器
        clearInterval(this.currentTimer);
      }
    },
    updateTime() {
      this.currentTimer = setInterval(() => {
        this.updateCurrentTime(this.$refs.myAudioPlayer.currentTime);
        this.updataDuration(this.$refs.myAudioPlayer.duration);
      }, 1000);
    },
  },
  watch: {
    playList: function () {
      this.$refs.myAudioPlayer.autoplay = true;
      this.$refs.cdcover.style.animationPlayState = "running";
      this.updatePlayStatus(true);
      this.updateTime();
    },
    playListIndex: function () {
      // console.log('playIndex Change')
      this.$refs.myAudioPlayer.autoplay = true;
      this.updateTime();
      this.updatePlayStatus(true);
    },
  },

  beforeCreate() {
        this.$store.dispatch("getLcalPlayList");
  },
  mounted() {
    // console.log(this.$refs);
    this.$store.dispatch("getLyric", this.playList[this.playListIndex].id);
    // this.updateTime()
  },
};
</script>

<style lang="less" scoped>
.FooterMusicWrap {
  width: 100%;
  position: fixed;
  bottom: 50px;
  background-color: #fff;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  z-index:5;
  .FooterMusic {
    width: 100%;
    height: .8rem;
    box-shadow: 2px 2px 10px rgba(222, 222, blue,.5);

    // bottom: constant(safe-area-inset-bottom);
    // bottom: env(safe-area-inset-bottom);

    background: #fff;
    border-top: 1px solid gray;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .cdcover {
      width: 0.9rem;
      height: 0.9rem;
      background: url("../../assets/cdcover.png");
      background-size: 0.9rem 0.9rem;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: -0.1rem;
      left: 0.2rem;
      animation: cdroate 20s linear infinite;
      animation-play-state: paused;
      img {
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 50%;
      }
    }

    .footerLeft {
      position: relative;
      display: flex;
      width: 70%;
      padding-left: 1.1rem;

      .info {
        display: flex;
        align-items: center;
        margin-left: 0.2rem;
        span {
          font-size: 0.2rem;
        }
      }
    }



.v-enter-active,
.v-leave-active {
  transition: all 0.2s ease;
}

.v-enter-from,
.v-leave-to {
    bottom: -1000px;
    opacity: 0;
}



    @keyframes cdroate {
      0% {
        transform: rotate(0deg);
      }
      25% {
        transform: rotate(90deg);
      }
      50% {
        transform: rotate(180deg);
      }
      75% {
        transform: rotate(270deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    .footerRight {
      width: 30%;
      display: flex;
      justify-content: space-around;
      padding-right: 0.2rem;
      svg {
        width: 0.5rem;
        height: 0.5rem;
      }
    }
  }
}
</style>